<template>
	<view class="viewimg">
		<!-- 利用vue3异步等待组件引入图表Suspense -->
		<Suspense>

				<echarts :option="option" style="height: 300px"></echarts>

		</Suspense>

		<!-- <view><echarts :option="option" style="height: 300px"></echarts></view> -->
	</view>
</template>

<script>
import { defineAsyncComponent } from 'vue';
const echarts = defineAsyncComponent(() => import('@/components/echarts/echarts.vue'));
// import echarts from '@/components/echarts/echarts.vue';
import request from '@/service/request1.js';
export default {
	data() {
		return {
			option: {
				}
		};
	},
	onLoad() {
		
	},
	components: {
		echarts
	},
	mounted() {
		this.logstatrt();
	},

	methods: {
		logstatrt() {
			// console.log('初次调用');
			request(
				'/api/workbench/deskmode?modetype=customer',
				{
					dateRang: ['2021-09-01', '2021-09-30'],
					selectType: ''
				},
				'POST'
			).then(res => {
				// console.log(res.data.result.data);
				res.data.result.data.forEach(e => {
					this.option.xAxis.data.push(e.label);   //  x轴数据赋值
					this.option.series[0].data.push(e.新增客户数)  // y轴数据赋值
					this.option.series[1].data.push(e.成交客户数)  // y轴数据赋值
					this.option.series[2].data.push(e.跟进客户数)  // y轴数据赋值
				});
				// console.log(this.option);
			});
			this.option = {
				// backgroundColor: "#011246",
				xAxis: {
					type: 'category',
					data: []
				},
				yAxis: {
					type: 'value'
				},
				    legend: {
				        data: ['新增客户数', '成交客户数', '跟进客户数']
				    },
				series: [
					{
						name:'新增客户数',
						data: [],
						type: 'line',
						smooth: true
					},
					{
						name:'成交客户数',
						data: [],
						type: 'line',
						smooth: true
					},
					{
						name:'跟进客户数',
						data: [],
						type: 'line',
						smooth: true
					},
				]
			};
		}
	}
};
</script>
<style scoped lang="scss">
.viewimg {
	height: 100%;
	background-color: $uni-text-color-inverse;
}
</style>
